
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>设计一个算法，用来压缩一个URL。 - 学习卡片</title>
      <style>
        body { font-family: sans-serif; background-color: #f0f8ff; color: #333; display: flex; flex-direction: column; align-items: center; padding: 50px 20px; }
        .header h1 { font-size: 32px; }
        .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; max-width: 1200px; }
        .card-container { perspective: 1200px; cursor: pointer; height: 250px; }
        .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.7s; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
        .card-container.flipped .card { transform: rotateY(180deg); }
        .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; box-sizing: border-box; border-radius: 16px; background-color: #fff; padding: 24px; }
        .card-back { background-color: #f0fff4; transform: rotateY(180deg); justify-content: space-between; }
        .card-category { font-size: 14px; color: #0052d9; margin-bottom: 8px; font-weight: 500; }
        .card-question { font-size: 20px; font-weight: 500; flex-grow: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
        .card-answer-wrapper { flex-grow: 1; overflow-y: auto; }
        .card-answer { font-size: 15px; line-height: 1.7; }
        .card-footer { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 16px; margin-top: 16px; }
        .card-source { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 12px; margin-top: 12px; }
      </style>
    </head>
    <body>
      <div class="header">
        <h1>设计一个算法，用来压缩一个URL。 - 学习卡片</h1>
      </div>
      <div class="grid-container">
        
    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">理论</div>
          <div class="card-question">设计一个URL压缩算法的主要目标是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">理论</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">其主要目标是将长URL转换为一个较短的唯一标识符，并且能够在需要时将这个短标识符还原为原始的URL。</div>
          </div>
          <div class="card-source">来源: 文档开篇部分</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">文档中介绍了哪两种生成唯一短标识符的常见策略？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">1. 哈希方法：使用如SHA-256或MD5等哈希函数对长URL进行哈希，并提取部分结果作为标识符。 2. 自增ID转换：为每个URL分配一个唯一的自增ID，然后将该ID转换为一个短字符串，例如使用Base62编码。</div>
          </div>
          <div class="card-source">来源: 1.1 唯一标识符生成</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">在URL压缩服务中，如何存储短标识符和原始URL之间的映射关系？为什么推荐使用数据库？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">可以使用HashMap或数据库来存储映射关系，其中键是短标识符，值是原始URL。推荐使用数据库是为了实现数据持久化，这样即使应用程序重启，映射数据也不会丢失。</div>
          </div>
          <div class="card-source">来源: 2. 实现存储映射关系</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">请描述将短标识符解码回原始URL的过程。</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">解码过程首先接收一个短标识符作为输入，然后从数据库或内存存储中查找这个短标识符对应的长URL，最后将查找到的原始长URL作为输出返回。</div>
          </div>
          <div class="card-source">来源: 3.2 解码过程</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">使用哈希方法生成短URL时存在什么潜在风险？应如何解决？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">哈希方法存在碰撞的风险，即可能为不同的长URL生成相同的短标识符。可以通过在数据库中维护映射关系来解决这个问题，在存入新记录前检查标识符是否已被使用。</div>
          </div>
          <div class="card-source">来源: 1.1 唯一标识符生成 & 优缺点</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">实现</div>
          <div class="card-question">在提供的Java示例代码中，`encode`方法的核心功能是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">实现</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">`encode`方法的核心功能是将一个整数类型的自增ID转换为一个Base62编码的短字符串。它通过循环对62取模和整除操作来实现进制转换。</div>
          </div>
          <div class="card-source">来源: 代码解析 -> encode 方法</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">理论</div>
          <div class="card-question">一个完整的URL压缩过程包含哪三个基本步骤？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">理论</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">1. 生成唯一标识符：为长URL创建一个唯一的短标识符。 2. 存储映射关系：将生成的短标识符与原始URL的对应关系保存起来。 3. 解码过程：提供一种机制，能够将短标识符解码回原始的长URL。</div>
          </div>
          <div class="card-source">来源: 文档开篇列表部分</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">实现</div>
          <div class="card-question">根据示例代码，`shortenURL`方法的主要职责是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">实现</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">`shortenURL`方法的主要职责是接收一个长URL，通过原子计数器生成一个唯一的自增ID，调用`encode`方法将ID转换为短字符串，然后将短字符串和长URL的映射关系存储在`urlMap`中，并最终返回生成的短字符串。</div>
          </div>
          <div class="card-source">来源: 代码解析 -> shortenURL 方法</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">根据文档，使用“自增ID结合Base62编码”这种方法的优点是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">这种方法的主要优点是“简单高效”和“易于实现”。自增ID保证了唯一性，而Base62编码能生成足够短的标识符。同时，其代码逻辑简单，易于理解和维护。</div>
          </div>
          <div class="card-source">来源: 优缺点 -> 优点</div>
        </div>
      </div>
    </div>

      </div>
    </body>
    </html>
